<template>
  <div class="talkCard" @click="toDetailed">
    <div class="head">
      <div class="state">
        <div class="imgHead">
          <img class="avatar" :src="avatar"/>
          <div class="name_time">
            <div class="name">{{name}}</div>
            <div class="time">{{timeAgo}}</div>
          </div>
        </div>
        <i @click.stop="showShare = true" class="stateImg iconfont icon-shenglve"></i>
        <!--        <img class="stateImg" :src="stateImg"/>-->
      </div>
      <div class="main">
        <div>
          <div class="title">{{activityName}}</div>
          <div class="text">{{ text }}</div>
        </div>
        <div class="pictures">
          <van-image
              height="300"
              width="300"
              v-for="(pic,index) in picture"
              fit="scale-down"
              :src="pic"
              @click.stop="clickImg(picture)"
              @error="errorImg"
          >
            <template v-slot:error>加载失败</template>
          </van-image>
        </div>
      </div>
      <div class="body">
        <div @click.stop="clickLike(id)" class="block">
          <i style="font-size: 19px" class="iconfont icon-icon-test2 iconfriendsHelp"
             :class="isLike ? 'icon-icon-test3 turnRed' : 'icon-icon-test2'"></i>
          <span class="num">{{ numLike }}</span>
          <!--          <span class="like">{{ like }}</span>-->
        </div>
        <div class="group">
          <!--          <i style="font-size: 19px" class="iconTest iconfont icon-icon-test"></i>-->
          <!--          <span class="commentNum">{{ commentNum }}</span>-->
          <!--          <span class="comments">{{ comments }}</span>-->
        </div>
      </div>
    </div>

    <!--    <div class="shareInJoin">-->
    <!--      <van-share-sheet-->
    <!--          v-model="showShare"-->
    <!--          title="立即分享给好友"-->
    <!--          :options="options"-->
    <!--          @select="onSelect"-->
    <!--      />-->
    <!--    </div>-->
  </div>
</template>

<script>
import {ImagePreview} from 'vant';

export default {
  name: "index",
  data() {
    return {
      isLike: false,
      showShare: false,
      options: [
        {name: '微信', icon: 'wechat'},
        {name: '微博', icon: 'weibo'},
        {name: '复制链接', icon: 'link'},
        {name: '分享海报', icon: 'poster'},
        {name: '二维码', icon: 'qrcode'},
      ],
      time: null,
      numLike: 0
    }
  },
  created() {
    // console.log(this.like);
    this.numLike = this.num;
    this.isLike = this.like;
  },
  props: {
    avatar: {
      type: String,
      default: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598603504182&di=73af4bb51b19526ac2ce8dc30b479441&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn19%2F0%2Fw400h400%2F20180910%2F3391-hiycyfw5413589.jpg'
    },
    name: {
      type: String,
      default: '张三'
    },
    text: {
      type: String,
      default: '1582年，“咖啡”一词通过荷兰aaaaaaaa\naaaaa\r\naaaaaaa语koffie进入英语…'
    },
    num: {
      type: Number,
      default: 6000
    },
    commentNum: {
      type: Number,
      default: 60000
    },
    timeAgo: {
      type: String,
      default: ""
    },
    id: {
      type: Number
    },
    activityName: {
      type: String,
      default: ""
    },
    picture: {
      type: Array,
      default: []
    },
    like: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    clickLike(id) {
      this.isLike = !this.isLike;
      axios.post('/activity/love', {
        id: id
      }, {headers: {isShowFullLoading: 'F'}}).then(res => {
        console.log(id,res);
        if (this.isLike) {
          this.numLike++;
        } else {
          this.numLike--;
        }
      })
    },
    onSelect(option) {
      this.showShare = false;
    },
    clickImg(e) {
      console.log(e);
      ImagePreview({
        images: [...e],
        closeable: true,
      });
    },
    errorImg(e) {
      e.path[1].style.height = "60px";
      e.path[1].style.width = "60px";
    },
    toDetailed() {
      this.$router.push('/index/explore/detailed?id=' + this.id);
    }
  },
  watch: {
    // showShare(v) {
    //   if (v === true) {
    //     this.$store.commit("isShowTabbar", false);
    //   } else {
    //     this.$store.commit("isShowTabbar", true);
    //   }
    // }
  }
}
</script>

<style scoped>
@import "./index.css";
@import "./icon/iconfont.css";

/deep/ .van-popup--bottom {
  bottom: 44px;
}

.shareInJoin /deep/ .van-share-sheet {
  /*position: relative;*/
  /*left: 0;*/
  /*right: 0;*/
  /*bottom: 0;*/
}
</style>
